import React, { useState } from 'react';
import { Flex } from 'antd';
import MyRadio from '../';

export default () => {
  const [value, setValue] = useState<number>(1);

  return (
    <Flex vertical gap="middle">
      <Flex vertical gap="small">
        <div>单选组：</div>
        <Flex gap="small">
          <MyRadio.Group value={value} onChange={(e) => setValue(e.target.value)}>
            <MyRadio value={1}>选项1</MyRadio>
            <MyRadio value={2}>选项2</MyRadio>
            <MyRadio value={3}>选项3</MyRadio>
          </MyRadio.Group>
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>按钮样式：</div>
        <Flex gap="small">
          <MyRadio.Group defaultValue="a" buttonStyle="solid">
            <MyRadio.Button value="a">选项A</MyRadio.Button>
            <MyRadio.Button value="b">选项B</MyRadio.Button>
            <MyRadio.Button value="c">选项C</MyRadio.Button>
          </MyRadio.Group>
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>不同尺寸：</div>
        <Flex gap="small">
          <MyRadio.Group defaultValue="a" size="large">
            <MyRadio.Button value="a">大尺寸</MyRadio.Button>
            <MyRadio.Button value="b">大尺寸</MyRadio.Button>
          </MyRadio.Group>
          <MyRadio.Group defaultValue="a">
            <MyRadio.Button value="a">默认尺寸</MyRadio.Button>
            <MyRadio.Button value="b">默认尺寸</MyRadio.Button>
          </MyRadio.Group>
          <MyRadio.Group defaultValue="a" size="small">
            <MyRadio.Button value="a">小尺寸</MyRadio.Button>
            <MyRadio.Button value="b">小尺寸</MyRadio.Button>
          </MyRadio.Group>
        </Flex>
      </Flex>
    </Flex>
  );
}; 